<template>
  <div class="lin_work">
    <div class="lin_work_list">
      <div class="lin_work_list_obsbot">
        <div class="lin_work_list_obsbot_video" >
          <div class="lin_work_list_obsbot_video_list">
            <video v-show="activeVideo === 1" src="/public/video/obsbot-tail2.mp4" autoplay="autoplay" loop="loop"></video>
            <video v-show="activeVideo === 2" src="/public/video/obsbot.mp4" autoplay="autoplay" loop="loop"></video>
          </div>
        </div>
        <div class="lin_work_list_obsbot_video_downline">
          <li :class="{'lin_work_list_obsbot_video_downline_light':  activeVideo === 1}" @click="changeVideo(1)"></li>
          <li :class="{'lin_work_list_obsbot_video_downline_light':  activeVideo === 2}" @click="changeVideo(2)"></li>
        </div>

        <div>
          <ObsbotAck/>
        </div>
      </div>

    </div>
  </div>

</template>

<script setup lang="ts">
import {gsap} from 'gsap'
import ObsbotAck from '~/ components/designer/ObsbotAck.vue';


const activeVideo = ref(1);
const changeVideo = (index: number) => {
  activeVideo.value = index;
};

const work_gsap = async ()=> {
  const element = document.querySelector('.lin_work_list_obsbot_video_list')
  gsap.fromTo(element, {
    y: 30,
    duration: 0.3,
    opacity: 0,
    ease: "power2.inOut"
  }, {
    y: 0,
    duration: 2,
    opacity: 1,
    ease: "power2.inOut"
  })
}

onMounted(async () => {
  await work_gsap()
})

</script>

<style scoped lang="scss">

.lin_work_list_obsbot{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.lin_work_list_obsbot_video_list {
  display: flex;
  justify-content: center;
  opacity: 0;
  padding: 40px 0;
}

.lin_work_list_obsbot_video_list video {
  border-radius: 15px;
  width: 50%;
}

.lin_work_list_obsbot_video_downline {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 50%;
  padding-bottom: 20px;
}

.lin_work_list_obsbot_video_downline li {
  display: flex;
  width: 30%;
  height: 2px;
  background: black;
  margin-right: 50px;
}

.lin_work_list_obsbot_video_downline li:last-child {
  margin-right: 0;
}


.lin_work_list_obsbot_video_downline li:hover {
  cursor: pointer;
}

.lin_work_list_obsbot_video_downline_light {
  background: var(--color-background) !important;
}

</style>